<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>知识图谱可视分析系统</title>
  <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/cytoscape/3.23.0/cytoscape.min.js"></script>
  <style>
    body { margin: 0; font-family: Arial; background: #f5f5f5; }
    .container { display: flex; height: 100vh; }
    .left-panel { width: 70%; padding: 10px; box-sizing: border-box; }
    .right-panel { width: 30%; padding: 10px; box-sizing: border-box; overflow-y: auto; }
    .panel { background: white; margin-bottom: 15px; padding: 15px; border-radius: 8px; box-shadow: 0 2px 5px rgba(0,0,0,0.1); }
    .header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
    .chart-container { height: 300px; }
    table { width: 100%; border-collapse: collapse; }
    th, td { padding: 8px; text-align: left; border-bottom: 1px solid #ddd; }
    tr:hover { background: #f0f8ff; }
  </style>
</head>
<body>

<div class="container">
  <!-- 左侧主区域 -->
  <div class="left-panel">
    <div class="panel" id="control-bar">
      <div class="header">
        <h2>知识图谱可视分析系统</h2>
        <div>
          <input type="text" id="search-input" placeholder="输入节点名..." />
          <button onclick="searchNode()">搜索</button>
          <select onchange="changeLayout(this.value)">
            <option value="cose">自动布局</option>
            <option value="dagre">层次布局</option>
          </select>
        </div>
      </div>
    </div>

    <div class="panel" id="graph-container" style="height: 500px;"></div>

    <div class="panel">
      <h3>IP-Cert 链路图</h3>
      <div id="sankey-chart" class="chart-container"></div>
    </div>
  </div>

  <!-- 右侧信息面板 -->
  <div class="right-panel">
    <div class="panel" id="stats-panel">
      <h3>图谱基本信息</h3>
      <p>节点数量：<span id="node-count">-</span></p>
      <p>边数量：<span id="edge-count">-</span></p>
      <p>产业类型：<span id="labels-list">-</span></p>
    </div>

    <div class="panel" id="industry-chart">
      <h3>黑灰产业对比图</h3>
      <div id="industry-bar" class="chart-container"></div>
    </div>

    <div class="panel" id="relation-table">
      <h3>团伙网络信息</h3>
      <table>
        <thead><tr><th>关系类型</th><th>数量</th></tr></thead>
        <tbody id="relation-tbody"></tbody>
      </table>
    </div>

    <div class="panel" id="summary-panel">
      <h3>团伙分析结果</h3>
      <p id="summary-text">正在加载...</p>
    </div>
  </div>
</div>

<script>
// 初始化图表
let cy;
let industryChart = echarts.init(document.getElementById('industry-bar'));
let sankeyChart = echarts.init(document.getElementById('sankey-chart'));

// 加载全局统计
fetch('/stats')
  .then(res => res.json())
  .then(data => {
    document.getElementById('node-count').innerText = data.node_count;
    document.getElementById('edge-count').innerText = data.edge_count;
    document.getElementById('labels-list').innerText = data.labels.join(', ');
  });

// 加载产业分布
fetch('/industry-distribution')
  .then(res => res.json())
  .then(data => {
    const option = {
      title: { text: '产业类型分布' },
      tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' } },
      xAxis: { type: 'category', data: data.map(d => d.name) },
      yAxis: { type: 'value' },
      series: [{ data: data.map(d => d.value), type: 'bar', itemStyle: { color: '#66a3ff' } }]
    };
    industryChart.setOption(option);
  });

// 加载关系分布
fetch('/relation-distribution')
  .then(res => res.json())
  .then(data => {
    const tbody = document.getElementById('relation-tbody');
    data.forEach(item => {
      const tr = document.createElement('tr');
      tr.innerHTML = `<td>${item.relation}</td><td>${item.count}</td>`;
      tbody.appendChild(tr);
    });
  });

// 加载分析摘要
fetch('/analysis-summary')
  .then(res => res.json())
  .then(data => {
    document.getElementById('summary-text').innerText = data.summary;
  });

// 加载图谱
fetch('/graph')
          .then(res => res.json())
          .then(data => {
            const elements = [];
            // data.nodes.forEach(n => {
            //   elements.push({  { id: n.id, label: n.label, type: n.type } });
            // });
            // data.edges.forEach(e => {
            //   elements.push({  { source: e.source, target: e.target, label: e.label } });
            // });

            data.nodes.forEach(n => {
              elements.push({
                data: { id: n.id, label: n.label, type: n.type }
              });
            });

            data.edges.forEach(e => {
              elements.push({
                data: { source: e.source, target: e.target, label: e.label }
              });
            });

            cy = cytoscape({
              container: document.getElementById('graph-container'),
              elements,
              style: [
                {
                  selector: 'node',
                  style: {
                    'background-color': function(ele) {
                      const type = ele.data('type');
                      // <--- 如果你的节点标签不是这些，请修改这里的颜色映射 ---
                      const colors = { Domain: '#ff6b6b', IP: '#4ecdc4', Cert: '#45b7d1', Whois: '#96ceb4' };
                      return colors[type] || '#66a3ff';
                    },
                    'label': 'data(label)',
                    'text-valign': 'center',
                    'color': '#000',
                    'font-size': '10px',
                    'width': 30,
                    'height': 30
                  }
                },
                {
                  selector: 'edge',
                  style: {
                    'width': 1,
                    'line-color': '#ccc',
                    'target-arrow-color': '#ccc',
                    'target-arrow-shape': 'triangle',
                    'curve-style': 'bezier'
                  }
                }
              ],
              layout: { name: 'cose', animate: true, fit: true }
            });

    // 点击节点高亮邻居
    cy.on('tap', 'node', function(evt) {
      const node = evt.target;
      cy.elements().removeClass('highlighted');
      node.addClass('highlighted');
      node.neighborhood().addClass('highlighted');
    });
  });

function changeLayout(layoutName) {
  cy.layout({ name: layoutName }).run();
}

function searchNode() {
  const keyword = document.getElementById('search-input').value.trim();
  if (!keyword) return;
  const found = cy.nodes().filter(`[label *= "${keyword}"]`);
  if (found.length > 0) {
    cy.fit(found, 50);
    found.flashClass('flash', 1000);
  } else {
    alert('未找到匹配节点');
  }
}

// 添加样式
const style = document.createElement('style');
style.textContent = `
  .highlighted { background-color: #ffeb3b !important; }
  .flash { animation: flash 1s ease-in-out; }
  @keyframes flash { 0% { opacity: 1; } 50% { opacity: 0.5; } 100% { opacity: 1; } }
`;
document.head.appendChild(style);

</script>

</body>
</html>